<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="加载中..."
      @load="onLoad"
    >
      <van-card
        v-for="item in $store.state.houseList"
        :key="item.houseCode"
        currency=""
        :desc="item.desc"
        :title="item.title"
        :thumb="`http://liufusong.top:8080${item.houseImg}`"
        @click="houseInfoFn(item.houseCode)"
        >
        <p slot="price" id="price">
          {{ item.price }} <span id="span">元/月</span>
        </p>
        <template #tags>
          <van-tag
            v-for="(val, index) in item.tags"
            :key="index"
            plain
            color="#9fe0e7"
            text-color="#39becd"
            type="danger"
            >{{ val }}</van-tag
          >
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
import { getHousesApi } from '@/api'
export default {
  props: ['areaId'],
  data () {
    return {
      city: {
        name: localStorage.getItem('cityName') || '',
        value: localStorage.getItem('cityValue') || ''
      },
      cityList: [],
      loading: false,
      finished: false,
      isShow: false
    }
  },
  // computed: {
  //   newCityList () {
  //     return this.$store.state.houseList.length === 0
  //       ? this.cityList
  //       : this.$store.state.houseList
  //   }
  // },
  async created () {
    const id = this.areaId ? this.areaId : this.city.value
    const res = await getHousesApi(id)
    this.$store.state.houseList = res.data.body.list
    this.loading = false

    // console.log(this.cityList)
  },
  methods: {
    onLoad () {
      // 异步更新数据
      // 加载状态结束
      this.loading = false
      // 数据全部加载完成
      this.finished = true
    },
    houseInfoFn (val) {
      this.$router.push({
        path: `/houseinfo/${val}`
      })
      // console.log(val)
    }
  }
}
</script>

<style lang="less" scoped>
#price {
  font-size: 16px;
  font-weight: 700;
  color: #fa5741;
  #span {
    font-size: 12px;
  }
}
</style>
